<template>
    <Dialog ref="dialogRef" :app-dialog="appDialog">
        <div class="container">
            <div class="container-item">
                <div class="title">
                    累计添加客户数
                    <el-tooltip content="通过该活码，添加的成员客户数，包含删除员工，算累计值。" placement="top">
                        <img class="help_icon" src="@/assets/image/customer/help_icon.png" alt="" />
                    </el-tooltip>
                </div>
                <div class="title-text">{{ custInfoCount.add }}</div>
            </div>
            <div class="container-item">
                <div class="title">
                    已入群客户数
                    <el-tooltip content="通过该活码，添加的成员客户数，包含删除员工，算累计值。" placement="top">
                        <img class="help_icon" src="@/assets/image/customer/help_icon.png" alt="" />
                    </el-tooltip>
                </div>
                <div class="title-text">{{ custInfoCount.join }}</div>
            </div>
            <div class="container-item">
                <div class="title">
                    退群客户数
                    <el-tooltip content=" 通过该活码，添加成员后进入该群的客户数，其中入群再退群的人数" placement="top">
                        <img class="help_icon" src="@/assets/image/customer/help_icon.png" alt="" />
                    </el-tooltip>
                </div>
                <div class="title-text">{{ custInfoCount.retreat }}</div>
            </div>
            <div class="container-item">
                <div class="title">删除客服人数</div>
                <div class="title-text">{{ custInfoCount.del }}</div>
            </div>
        </div>
        <div class="filter_header">
            <ZwSearchForm row-num="3" :option="searchOption" @search="search" @reset="reset" @expand="getTableH" />
            <ZwTable
                ref="tableRef"
                class="table-box"
                :option="tableOption"
                :row-key="getRowKey"
                :fetch-params="state.searchParams"
                :fetch-api="fetchApi()"></ZwTable>
        </div>
    </Dialog>
</template>
<script setup lang="tsx">
import Dialog from '@/components/Dialog.vue';
import { watch, reactive, ref, onMounted, nextTick, computed } from 'vue';
import { getCustomerCount, getCustomerList } from '@/api/customerCenter/autoPullGroup';
import Search from './components/search.vue';
import ZwSearchForm from '@/components/zw/search-form/SearchForm';
import ZwTable from '@/components/zw/table/Table';
import { useStore } from '@/store';
import { deepCopy } from '@/utils/helper';
import { ElMessage, ElAvatar } from 'element-plus';

const store = useStore();
const ZWPaginationRef = ref(null);
const id = ref(0);
const dataList = ref([]);
const props = defineProps(['detailsId']);

const custInfoCount = ref({
    add: 0,
    join: 0,
    retreat: 0,
    del: 0
});
const defaultParams = reactive({
    id: '',
    cust_name: '',
    chat_status: '',
    groupchat_id: [],
    user_id: [],
    date_time: []
});
const state = reactive({
    searchParams: deepCopy(defaultParams)
});
const getRowKey = (row: any) => {
    return row.id;
};
const searchOption = computed(() => {
    return [
        {
            label: '搜索客户',
            name: 'cust_name',
            value: '',
            type: 'input',
            width: '280px',
            placeholder: '请输入客户名称'
        },
        {
            label: '是否入群',
            name: 'chat_status',
            value: '',
            type: 'select',
            placeholder: '请选择拉群方式',
            fetchOptionApi: () => {
                return new Promise(resolve => {
                    resolve([
                        { name: '全部', id: '0' },
                        { name: '未入群', id: '1' },
                        { name: '已入群', id: '2' },
                        { name: '已退群', id: '3' }
                    ]);
                });
            },
            formatOption: (v: { name: any; id: any }) => ({
                label: v.name,
                value: v.id
            })
        },
        {
            label: '选择群聊',
            name: 'groupchat_id',
            value: '',
            type: 'select',
            placeholder: '请选择所在企微群',
            popperClass: 'zw-hide_select_option',
            isGroupSelect: true,
            multiple: true,
            echoTypeFlag: true,
            formatOption: (v: any) => ({
                label: v.name,
                value: v.id
            })
        },
        {
            label: '选择成员',
            name: 'user_id',
            value: [],
            type: 'select',
            placeholder: '全部',
            popperClass: 'zw-hide_select_option',
            isUserSelect: true,
            formatOption: v => ({
                label: v.name,
                value: v.id
            })
        }
        // {
        //   label: '时间筛选',
        //   name: 'create_time',
        //   value: [],
        //   type: 'datePicker',
        //   datePickerType: 'datetimerange',
        //   valueFormat: 'YYYY-MM-DD HH:mm:ss',
        //   startPlaceholder: '开始时间',
        //   endPlaceholder: '结束时间'
        // },
    ];
});
const tableOption = [
    {
        prop: 'cust_name',
        label: '客户',
        width: 200,
        render({ row }) {
            return (
                <div class="cust_box">
                    <ElAvatar shape="square" size={24} src={row.cust_avatar} />
                    <span>{row.cust_name}</span>
                    <span vShow={row.cust_sex} class={['isMale', row.cust_sex == 1 ? '' : 'isfeMale']}>
                        {row.cust_sex == 1 ? '男' : '女'}
                    </span>
                </div>
            );
        }
    },
    {
        prop: 'cust_status',
        label: '状态'
    },
    {
        prop: 'user_name',
        label: '所属成员',
        width: 180
    },
    {
        prop: 'groupchat_name',
        label: '加入群聊',
        width: 200,
        showOverflowTooltip: true,
        render({ row }) {
            return (
                <div class="group_wrap" vShow={!!row.groupchat_name}>
                    <img class="group_icon" src={row.avatar} alt="" />
                    <span>{row.groupchat_name}</span>
                </div>
            );
        },
        renderShowOverflowTooltip({ row }) {
            return <span>{row.groupchat_name}</span>;
        }
    },
    {
        prop: 'add_time',
        label: '添加客服时间',
        width: 220
    },
    {
        prop: 'del_time',
        label: '删除客服时间',
        width: 220
    },
    {
        prop: 'join_time',
        label: '入群时间',
        width: 220
    },
    {
        prop: 'retreat_time',
        label: '退群时间',
        width: 220,
        render({ row }) {
            return <span>{row.retreat_time || '--'}</span>;
        }
    }
];
const fetchApi = () => {
    // 获取文件列表
    // getTableH()
    return getCustomerList;
};
const search = (data: any) => {
    const res = { ...data, user_id: [data.user_id], id: id.value };
    state.searchParams = res;
};
const reset = (v?: any) => {
    const res = { ...state.searchParams, ...v };
    state.searchParams = res;
};

const cancelHandel = () => {
    appDialog.visible = false;
    appDialog.title = '';
};
const submitHandel = () => {
    cancelHandel();
};
const appDialog = reactive({
    visible: false,
    title: '',
    width: '1108px',
    cancel: cancelHandel,
    submit: submitHandel,
    cancelText: '取消',
    submitText: '保存'
});
watch(
    () => appDialog.visible,
    async val => {
        if (val && id.value) {
            state.searchParams.id = id.value;
            const res = await getCustomerCount({ id: id.value });
            custInfoCount.value = res;
        }
    }
);
defineExpose({
    appDialog,
    id
});
</script>
<style lang="scss" scoped>
.container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 32px 24px;
    background-color: #fff;
    margin-top: 16px;
    border: 1px solid #eaeaea;
    border-bottom: 1px solid #ffc69e;

    .container-item {
        text-align: left;

        .title {
            padding-bottom: 8px;
            font-size: 14px;
            font-family: PingFangSC-Regular, 'PingFang SC';
            font-weight: 400;
            color: #666;
        }

        .title-text {
            font-size: 30px;
            font-family: HelveticaNeue-Medium, HelveticaNeue;
            font-weight: 500;
            color: #33302d;
            line-height: 36px;
        }
    }

    .line-item {
        width: 1px;
        height: 60px;
        background-color: #f0f0f0;
        border-radius: 1px;
    }
}

.filter_header {
    margin-top: 20px;
    margin-bottom: 20px;
}

:deep(.cust_box) {
    display: flex;
    align-items: center;

    .user_icon {
        width: 50px;
        margin-right: 10px;
    }

    .isMale {
        display: inline-block;
        width: 18px;
        font-size: 14px;
        line-height: 18px;
        border-radius: 50%;
        color: #fff;
        background-color: #75ddf4;
        text-align: center;
        margin-left: 5px;
    }

    .isfeMale {
        background-color: #f474bf;
    }
}

:deep(.group_wrap) {
    background: #fff;
    border-radius: 2px;
    border: 1px solid #eaeaea;
    padding: 6px;
    height: 36px;
    font-size: 14px;
    font-family: STHeitiSC-Light, STHeitiSC;
    font-weight: 300;
    color: #33302d;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    .group_icon {
        width: 24px;
        height: 24px;
        margin-right: 8px;
        vertical-align: middle;
    }

    span {
        margin-right: 5px;
        vertical-align: middle;
    }
}

.help_icon {
    cursor: pointer;
    width: 14px;
    height: 14px;
}
</style>
